<template>
  <div v-show="percentage !== 0" class="remote-upload-file" title="文件发送中">
    <el-progress :text-inside="true" :stroke-width="26" :percentage="percentage"></el-progress>
  </div>
</template>

<script>
export default {
  name: "RemoteUploadFile",
  components: {},
  props: ["uuid"],
  data() {
    return {
      percentage: 0,
    };
  },
  methods: {
    upload(file) {
      if (this.percentage > 0) {
        return;
      }

      var formdata = new FormData();
      formdata.append("file", file);
      formdata.append("uuid", this.uuid);

      this.$jquery.ajax({
        url: "/webapi/file/upload?uuid=" + this.uuid,
        type: "post",
        dataType: "json",
        data: formdata,
        timeout: 9999999,
        processData: false,
        contentType: false,
        xhr: () => {
          var xhr = new XMLHttpRequest();
          xhr.upload.addEventListener("progress", (e) => {
            var progressRate = (e.loaded / e.total) * 100;
            this.percentage = parseInt(progressRate);
          });
          return xhr;
        },
        success: (resp) => {
          this.percentage = 0;
          if (resp.success) {
            this.$notify({
              title: "发送文件",
              message: "发送文件完成",
              type: "success",
            });
            return;
          }

          if (resp.code === 2) {
            this.$notify({
              title: "发送文件",
              message: "授权过期，无法发送文件",
              type: "error",
            });
            return;
          }

          this.$notify({
            title: "发送文件",
            message: "发送文件失败，请重试",
            type: "error",
          });
        },
        error: () => {
          this.percentage = 0;
          this.$notify({
            title: "发送文件",
            message: "发送文件失败，请重试",
            type: "error",
          });
        },
      });
    },
  },
  mounted() {},
  destroyed() {},
};
</script>

<style>
.remote-upload-file {
  position: absolute;
  height: 20;
  width: 350px;
  right: 10px;
  bottom: 10px;
  z-index: 10;
}
</style>